<template>
  <div class="articles">
    <div class="article-list">
      <!-- <ul class="display-switcher">
        <li
          class="list"
          @click="display_type = 'list'"
          :class="display_type == 'list' ? 'current' : ''"
        >
          <q-icon name="mdi-format-list-bulleted" />
          <q-tooltip>
            列表
          </q-tooltip>
        </li>

        <li
          class="card"
          @click="display_type = 'card'"
          :class="display_type == 'card' ? 'current' : ''"
        >
          <q-icon name="mdi-table-large" />
          <q-tooltip>
            卡片
          </q-tooltip>
        </li>
      </ul> -->
      <!-- :data-aos="index % 2 == 0 ? 'fade-down-left' : 'fade-down-right'" -->
      <div :class="`${display_type}-container `">
        <div class="article-wrapper">
          <post-item
            v-for="(item, index) in articles"
            :postItem="item"
            :key="index"
            data-aos-easing="ease-in-out"
            data-aos-delay="100"
            data-aos-duration="1000"
          ></post-item>
        </div>
        <div class="skeleton" v-if="isFetching">
          <skeleton v-for="(item, index) in 9" :key="index" />
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <!-- <div class="pagination" v-if="type == 'page' && pagination.total > 0">
      <pager
        :page-index="pagination.page"
        :page-size="pagination.size"
        :total="pagination.total"
        @change="pageChange"
      ></pager>
 
    </div> -->
    <!-- :max="pagination.total / pagination.size + 10" -->
    <div class="q-pa-lg flex flex-center">
      <q-btn
        v-if="type == 'loadmore'"
        @click="loadMore"
        color="primary"
        glossy
        :disable="pagination.page >= pagination.pageCount"
      >
        <span v-if="pagination.page >= pagination.pageCount">没有更多了</span>
        <span v-else>点击加载更多</span>

        <template v-slot:loading>
          <q-spinner-hourglass class="on-left" />
          Loading...
        </template></q-btn
      >
      <q-pagination
        v-if="type == 'page'"
        v-model="pagination.page"
        :max="pagination.pageCount"
        :max-pages="5"
        @input="pageChange"
        :boundary-numbers="true"
      >
      </q-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator';

import postItem from './item.vue';
import { scroll } from 'quasar';
import { Pagination } from 'src/types/pagination';
import skeleton from './skeleton.vue';
const { getScrollTarget, setScrollPosition, getScrollPosition } = scroll;

// import AOS from 'aos';
// import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..

@Component<articleList>({
  components: {
    postItem,
    skeleton
  },
  mounted() {
    // AOS.init();
    // this.pageData = this.pagination;
  }
})
export default class articleList extends Vue {
  @Prop({ type: Array, required: true, default: [] })
  readonly articles!: [];

  @Prop({ type: String, required: false, default: 'loadmore' })
  readonly type!: string;

  @Prop({
    type: Object,
    required: false,
    default: () => ({ total: 0, pageCount: 0, page: 1, pageSize: 10 })
  })
  readonly pagination!: any;

  @Prop({ type: String, required: false, default: 'list' })
  readonly display_type: string = 'list';

  private pageData: Pagination = null;

  get defaultImg(): string {
    return this.$store.state.global.defaultImg;
  }

  get isFetching(): boolean {
    return this.$store.state.article.fetching;
  }
  @Watch('pagination')
  handlePageChange() {
    console.log('watch', this.pagination);
    this.pageData = this.pagination;
  }
  scrollToContent() {
    const el = document.querySelector('html');
    const offset =
      document.documentElement.scrollTop + window.screen.availHeight - 180;

    const duration = 300;
    setScrollPosition(el as HTMLElement, offset, duration);
  }
  public loadMore() {
    this.scrollToContent();
    this.pageChange(++this.pageData.page);
  }

  @Emit('pageChange')
  public pageChange(page: number) {
    return page;
  }
}
</script>

<style lang="scss" scoped>
.articles {
  width: 100%;
  .article-list {
    max-width: 940px;
    margin: 0 auto;
  }
}

.pagination {
  text-align: center;
  margin: 1rem 0;
}
.list-container {
  max-width: 640px;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .articles {
    .display-switcher {
      display: none;
    }
    .article-list {
      margin: 0 auto;
    }
  }
}

@media screen and (min-width: 1024px) {
  .card-container {
    display: flex;
    flex-wrap: wrap;

    .article-list-skeleton {
      padding: 0;
      margin: 0;
      list-style: none;
      overflow: hidden;
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .item {
        display: flex;
        flex-basis: 30%;
        padding: 0.618rem;
        margin-right: 1rem;
        margin-bottom: 1.236rem;
        background-color: var(--card-bg);
        transition: background-color 0.25s;
        border-radius: 4px;
        overflow: hidden;
        flex-wrap: wrap;
        &:last-child {
          margin-bottom: 0;
        }

        .thumb {
          height: 10rem;
          width: 15rem;
          flex-basis: 100%;
        }

        .content {
          padding: 0.8rem;
          flex-grow: 1;
          margin-top: 0.8rem;

          .title {
            height: 1.4em;
            width: 36%;
          }
          .description {
            margin-top: 0.618rem;
          }
        }
      }
    }
  }
}
.display-switcher {
  text-align: right;
  li {
    list-style: none;
    display: inline-flex;
    padding: 4px 8px;
    cursor: pointer;
    color: #8b9bb0;
    border-radius: 5px;
    transition: $transition-time-slow;
    margin: 0 5px;
    > i {
      font-size: 15px;
    }
    &.current {
      background: linear-gradient(to right, #ec008c, #fc6767) !important;
      color: var(--text-white);
    }
  }
}
</style>
